<template>
  <el-form :data="form">
    <el-form-item label="商品名称">
      <el-input v-model="form.keyword"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="searchFn">搜索</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="list">
    <el-table-column label="产品名称" prop="name" />
    <el-table-column label="产品销量" prop="sale" />
  </el-table>
  <el-pagination
    v-model:current-page="pageNum"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 50, 100]"                                                                  
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="pageSizeChangeHandle"
    @current-change="pageChangeHandle"
  />
</template>
<script setup lang="ts">
import useTable from "@/hooks/useTable";
import { reactive } from "vue";
import { getProductListApi } from "./api";

const form = reactive({
  keyword: "",
});

const {
  list,
  total,
  pageNum,
  pageSize,
  pageSizeChangeHandle,
  pageChangeHandle,
  searchFn,
} = useTable(getProductListApi, form);
</script>
<style lang="less" scoped></style>
